      
var socket;
let storage = window.localStorage;
function sign(socket, id, token) {
  storage.id = id;
  storage.token = token;
  var root = document.createElement('sign');
  var child = document.createElement('child');
  root.appendChild(child);
  child.setAttribute('id', id);
  child.setAttribute('token', token);
  console.log("----:" + root.outerHTML);
  socket.send(root.outerHTML);
}
function websocket_init() {
  socket = new WebSocket("ws://192.168.3.173:12222/websocket");
  socket.onopen = function () {
    console.log("WebSocket connected");
    if (storage.id) {
      console.log("id: " + storage.id);
      sign (socket, storage.id, storage.token);
    } else {
      sign (socket, "245", "17931");
    }
  };
  socket.onmessage = function (event) {
    var message = event.data;
    console.log("++++:" + message);
    handle_text (message);
  };
  socket.onclose = function () {
    console.log("WebSocket disconnected");
    //document.getElementById("show-contacts-notice").innerHTML = "无法连接到服务器";
  };
}
function i_send (children, box) {
  var element;
  for (const node of children) {
    element = document.createElement("div");
    element.style.textAlign = "right";
    element.style.backgroundColor = "green";
    element.style.gridColumn = "span 16";
    element.innerText = node.getAttribute("msg") + ":[me]";
    box.appendChild(element);
  }
  box.scrollTop = box.scrollHeight;
}
function i_read (children, box, notice) {
  var element, peer_id;
  for (const node of children) {
    peer_id = node.getAttribute("peer_id");
    if (box.style.display == "grid") {
      if (peer_id == storage.peer_id) {
        element = document.createElement("div");
        element.style.textAlign = "left";
        element.innerText = storage.peer_id + ":" + node.getAttribute("msg");
        box.appendChild(element);
      } else {
        notice.innerHTML = node.getAttribute("peer_id") + "send a message";
      }
    } else {
      var chats;
      chats = document.getElementById('no_read-' + peer_id);
      if (chats) {
        cells = document.getElementById("no_read-cell_" + peer_id);
        cells.innerHTML = cells.innerHTML - 0 + 1;
      } else {
        var box = document.getElementById("chats-box");
        if (typeof box === 'object' && box !== null && 'appendChild' in box) {
          create_no_read_element(box, peer_id, 1);
        } else {
          console.log("no chats-box");
        }
      }
    }
  }
  box.scrollTop = box.scrollHeight;
}
function handle_text (message) {
  //console.log("status:" + storage.status);
  var show_message, notice, as, more, chats_box, contacts_box;
  var parser, root, child, err, id, msg;
  let children;
  show_message = document.getElementById("show-message");
  history_box = document.getElementById("history-box");
    console.log("message:");
    notice = document.getElementById("show-message-notice");
    more = document.getElementById("more");
    var box = document.getElementById("history-box");
    if (box) {
      box.style.display = "grid";
    }
  as = document.getElementById("add/sign");
  //parser xml
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(message, "text/xml");
  root = xmlDoc.documentElement;
  child = root.childNodes[0];
  children = root.childNodes;
  if (child)
    err = child.getAttribute("error");
  if (root.nodeName == "") {
    show_message = "----:" + child.getAttribute("msg");
  } else if (root.nodeName == "sign") {
    //i_sign (err, notice, as, show_contacts);
  } else if (root.nodeName == "send") {
    i_send (children, history_box);
  } else if (root.nodeName == "read") {
    i_read (children, history_box, notice);
  } else {
    console.log("invalid nodeName:" + root.nodeName);
  }
}
function send_message() {
  var inputElement = document.getElementById("message-input");
  var message = inputElement.value;
  if (socket.readyState == WebSocket.OPEN) {
    if (message !== "") {
      var root = document.createElement('send');
      var child = document.createElement('child');
      root.appendChild(child);
      child.setAttribute('peer_id', storage.peer_id);
      child.setAttribute('msg', message);
      console.log("----:" + root.outerHTML);
      socket.send(root.outerHTML);
      inputElement.value = "";
    }
  } else {
  }
}
var m;
m = document.getElementById('show-message');
m.style.display = "grid";
document.getElementById('history-box').style.display = "grid";
